<template>
  <el-container>
  <el-header>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="分类名称">
    <el-input v-model="formInline.user" placeholder="分类名称"></el-input>
  </el-form-item>
  <el-form-item label="是否启用">
    <el-select v-model="formInline.region" clearable  placeholder="是否启用">
      <el-option label="启用" value="false"></el-option>
      <el-option label="禁用" value="true"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
  </el-form-item>
</el-form>
  </el-header>
  <el-main>
    <el-table
   :data="tableData"
   style="width: 100%;margin-bottom: 20px;"
   row-key="PId"
   border
   default-expand-all
   :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
   <el-table-column
     prop="PName"
     label="分类"
     sortable
     width="180">
   </el-table-column>
   <el-table-column
     prop="Psort"
     label="排序"
     sortable
     width="180">
   </el-table-column>
   <el-table-column
     prop="PYesNoEnable"
     label="物料/产品">
     <template slot-scope="scope">
        <span v-if="scope.row.PYesNoEnable==false">物料</span>
        <span v-if="scope.row.PYesNoEnable==true">产品</span>
     </template>
   </el-table-column>
   <el-table-column
     prop="PYesNoQiYun"
     label="是否启用">
     <template slot-scope="scope">
        <el-tag v-if="scope.row.PYesNoQiYun==false">是</el-tag>
        <el-tag v-if="scope.row.PYesNoQiYun==true">否</el-tag>
     </template>
   </el-table-column>
   <el-table-column
     prop="PDate"
     label="创建时间">
   </el-table-column>
   <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="AddClick(scope.row.PId)" type="text" size="small"  icon="el-icon-plus">添加</el-button>
        <el-button @click="UpdClick(scope.row.PId)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
        <el-button @click="deleteClick(scope.row.PId)" v-if="scope.row.Psort!=1" type="text" size="small" icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
 </el-table>    
  </el-main>
  <el-footer>
    <el-dialog v-if="IsAddShow" :visible.sync="IsAddShow">
        <ProductViewAdd :PId="PId" @CloseProAdd="CloseProAdd"></ProductViewAdd>
      </el-dialog>
      <el-dialog v-if="IsUpdShow" :visible.sync="IsUpdShow">
        <ProductViewUpd :PId="PId" @CloseProUpd="CloseProUpd"></ProductViewUpd>
      </el-dialog>
  </el-footer>
</el-container>
</template>

<script>
import ProductViewAdd from "../../components/Materialcomponents/ProductViewAdd.vue";
import ProductViewUpd from "../../components/Materialcomponents/ProductViewUpd.vue";
export default {
  components: { ProductViewAdd,ProductViewUpd },
   data() {
     return {
        tableData:[],
        formInline: {
          user: '',
          region: '',
        },
        IsAddShow:false,
        IsUpdShow:false,
        PId:0,
     }
   },
   methods: {
    deleteClick(id){
      this.axios.delete("http://localhost:5255/api/Material/DeleleProducts?PId="+id).then(
        res=>{
          if(res.data.Code==200){
            this.$message.success(res.data.ErrorInfo);
            this.xsShow();
          }
          else{
            this.$message.error(res.data.ErrorInfo);
            this.xsShow();
          }
        })
    },
    CloseProAdd(){
      this.IsAddShow = false;
      this.xsShow();
    },
    AddClick(res){
      this.PId = res;
      this.IsAddShow = true;
    },
    CloseProUpd(){
      this.IsUpdShow = false;
      this.xsShow();
    },
    UpdClick(res){
      this.PId = res;
      this.IsUpdShow = true;
    },
   xsShow(){
    let yesno='';
    if(this.formInline.region==""){
      yesno=false;
    }
    else{
      yesno = this.formInline.region;
    }
      this.axios.get("http://localhost:5255/api/Material/GetProducts?PFId=0&PName="+this.formInline.user
      +"&PYesNo="+yesno)
      .then(res=>{
          this.tableData = res.data.Data;
          console.log(res.data.Data);
      })
   },
   onSubmit() {
        console.log('submit!');
        this.xsShow();
      }
   },
   created(){
    this.xsShow();
   }
 }
</script>